<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title></title>
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css">
		<style>
			.van-tabs__line {
				background: #005BAC;
			}

			.van-tabs__content {
				height: 100%;
			}

			.van-empty {
				margin-top: 50px;
			}

			.van-empty__description {
				margin-top: -80px;
			}

			.sp_item {
				margin: 0px 12px;
				padding: 10px 0;
				border-bottom: 1px solid #efefef;
			}

			.sp_item_left {
				width: 35%;
				height: 90px;
				display: flex;
				align-items: center;
				border-radius: 5px;
				overflow: hidden;
			}

			.sp_item_left img {
				width: 100%;
				margin: 0 auto;
			}

			.sp_item_right {
				width: 62%;
				margin-left: 3%;
			}

			.contentscroll {
				overflow: scroll;
			}

			.line1 {
				display: -webkit-box;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		</style>
	</head>
	<body style="background-color: white;">
		<div id="app" v-cloak class="margin">
			<form action="/">
				<van-search v-model="value" placeholder="输入名称进行查询" @search="search" @clear='onClose'></van-search>
			</form>
			
			<van-tabs v-if='showSearch==false'  v-model:active="active" @click-tab="onClick">
				<van-tab v-for="(item1,index) in tab" :key="index" :title="item1.columnName">
					<div class="contentscroll" :style="{height: contentHeight}">
						<van-list v-if="nothing==1&&type=='sugar'" v-model="loading" offset='300' :finished="finished"
							finished-text="没有更多了" :immediate-check="false" @load="onLoad">
							<div class="flex sp_item" v-for="item in detail">
								<div class="sp_item_left">
									<img :src="item.foodThumb" alt="">
								</div>
								<div class="flex flex-v flex-pack-justify sp_item_right">
									<p class="text_title text_ellipsis">{{item.foodName}}</p>
									<p class="font14" style="color: var(--van-tab-text-color);">GI:{{item.foodKcal}}</p>
								</div>
							</div>
						</van-list>

						<van-list v-if="nothing==1&&type=='pill'" v-model="loading" offset='300' :finished="finished"
							finished-text="没有更多了" :immediate-check="false" @load="onLoad">
							<div class="flex sp_item" v-for="item in detail" @click='linkToDetail(item.dataId)'>
								<div class="sp_item_left">
									<img :src="item.drugThumb" alt="">
								</div>
								<div class="flex flex-v flex-pack-justify sp_item_right">
									<p class="text_title text_ellipsis">{{item.drugName}}</p>
									<p class="font14 line1" style="color: var(--van-tab-text-color);">
										规格型号:{{item.drugSpec}}</p>
								</div>
							</div>
						</van-list>
					</div>
					<van-empty v-if="nothing==2" class="custom-image" image="../doctor/img/blank_pic.png"
						description="— 未搜索到相关内容 —" />
				</van-tab>
			</van-tabs>

			<div v-if='showSearch==true' class="">
				<van-list v-if="searchnothing==1&&type=='sugar'" v-model="searchloading" offset='300' :finished="searchfinished"
					finished-text="没有更多了" :immediate-check="false" @load="searchOnLoad">
					<div class="flex sp_item" v-for="item in searchList">
						<div class="sp_item_left">
							<img :src="item.foodPhoto" alt="">
						</div>
						<div class="flex flex-v flex-pack-justify sp_item_right">
							<p class="text_title text_ellipsis">{{item.foodName}}</p>
							<p class="font14" style="color: var(--van-tab-text-color);">GI:{{item.foodKcal}}</p>
						</div>
					</div>
				</van-list>
				<van-list v-if="searchnothing==1&&type=='pill'" v-model="searchloading" offset='300' :finished="searchfinished"
					finished-text="没有更多了" :immediate-check="false" @load="searchOnLoad">
					<div class="flex sp_item" v-for="item in searchList" @click='linkToDetail(item.dataId)'>
						<div class="sp_item_left">
							<img :src="item.drugThumb" alt="">
						</div>
						<div class="flex flex-v flex-pack-justify sp_item_right">
							<p class="text_title text_ellipsis">{{item.drugName}}</p>
							<p class="font14 line1" style="color: var(--van-tab-text-color);">
								规格型号:{{item.drugSpec}}</p>
						</div>
					</div>
				</van-list>
				<van-empty v-if="searchnothing==2" class="custom-image" image="../doctor/img/blank_pic.png"
					description="— 未搜索到相关内容 —" />
			</div>
		</div>
	</body>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<script src="../common/js/axios.min.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl
		} from '../common/js/api/vue3-axios-utils.js'


		const PatientData = {
			data() {
				return {
					url: {
						sugarList: '/100/16/1001610',
						pillCategory: '/100/13/1001308',
						pillList: '/100/13/1001302',
						sugarSearch: '/100/16/1001605'
					},
					tab: [],
					sugartab: [{
						dataId: '3',
						columnName: '高升糖指数',
					}, {
						dataId: '2',
						columnName: '中升糖指数',
					}, {
						dataId: '1',
						columnName: '低升糖指数',
					}],
					type: '',
					page: 1,
					pageSize: 10,
					total_page: 0,
					nothing: 1,
					finished: false,
					loading: false,
					id: 3,
					active: 0,
					detail: [],
					searchList:[],
					showSearch:false,
					value:'',
					searchfinished: false,
					searchloading: false,
				};
			},
			watch: {},
			created() {
				let tabtype = url('?tabtype')
				this.type = tabtype
				if (tabtype == 'sugar') {
					this.tab = this.sugartab
					// this.id = 3
				} else {
					this.getPillCategory()
				}
			},
			mounted() {
				this.contentHeight = document.documentElement.clientHeight - 54 - 44 + 'px'
				this.getList()
			},
			methods: {
				getList() {
					if (url('?tabtype') == 'sugar') {
						this.getSugarList()
					} else {
						this.getPillList()
					}
				},
				getSugarList() {
					postAction(spliceUrl(this.url.sugarList), {
						giIndex: this.id,
						pageNum: this.page,
						pageSize: this.pageSize
					}).then(res => {
						res = res.data
						if (res.success) {
							document.title = '升糖指数'
							if (res.result.records.length > 0) {
								this.nothing = 1
								this.detail = this.detail.concat(res.result.records)
								this.total_page = res.result.pages
								this.loading = false
							} else {
								if (this.page == 1) {
									this.nothing = 2
									this.detail = []
								} else {}
							}
						} else {
							console.log(res.message)
						}
					})
				},
				getPillCategory() {
					getAction(spliceUrl(this.url.pillCategory)).then(res => {
						res = res.data
						console.log('getPillCategory', res, res.result[0].dataId)
						if (res.success) {
							this.tab = res.result
						}
					})
				},
				getPillList() {
					postAction(spliceUrl(this.url.pillList), {
						categoryId: this.id,
						page: this.page,
						pageSize: this.pageSize
					}).then(res => {
						res = res.data
						if (res.success) {
							document.title = '药品查询'
							if (res.result.records.length > 0) {
								this.nothing = 1
								this.detail = this.detail.concat(res.result.records)
								this.total_page = res.result.pages
								this.loading = false
							} else {
								if (this.page == 1) {
									this.nothing = 2
									this.detail = []
								} else {}
							}
						} else {
							console.log(res.message)
						}
					})

				},

				onClick(index) {
					console.log('onClick-index', index)
					this.detail = []
					this.active = index.name
					this.page = 1
					this.id = this.tab[index.name].dataId
					this.loading = false
					this.finished = false
					this.getList()
				},
				onLoad() {
					if (this.page < this.total_page) {
						this.page++
						this.getList()
					} else {
						this.loading = false
						this.finished = true
					}
				},
				linkToDetail(id) {
					window.location.href = 'pillDetail.html?id=' + id
				},
				search(val) {
					this.page = 1
					if (url('?tabtype') == 'sugar') {
						this.searchSugar(val)
					} else {
						this.searchPill(val)
					}
					
				},
				searchSugar(e){
					postAction(spliceUrl(this.url.sugarSearch), {
						foodName : e,
						pageNum: this.page,
						pageSize: this.pageSize
					}).then(res => {
						res = res.data
						if (res.success) {
							this.showSearch = true
							document.title = '升糖指数'
							if (res.result.records.length > 0) {
								this.searchnothing = 1
								this.searchList = this.searchList.concat(res.result.records)
								this.total_page = res.result.pages
								this.searchloading = false
							} else {
								if (this.page == 1) {
									this.searchnothing = 2
									this.searchList = []
								} else {}
							}
						} else {
							console.log(res.message)
						}
					})
				},
				searchPill(e){
					postAction(spliceUrl(this.url.pillList), {
						drugName: e,
						page: this.page,
						pageSize: this.pageSize
					}).then(res => {
						res = res.data
						this.showSearch = true
						if (res.success) {
							document.title = '药品查询'
							if (res.result.records.length > 0) {
								this.searchnothing = 1
								this.searchList = this.searchList.concat(res.result.records)
								this.total_page = res.result.pages
								this.searchloading = false
							} else {
								if (this.page == 1) {
									this.searchnothing = 2
									this.searchList = []
								} else {}
							}
						} else {
							console.log(res.message)
						}
					})
				},
				onClose(){
					this.showSearch = false
					this.page = 1
					this.detail = []
					this.searchList = []
					this.loading = false
					this.finished = false
					this.getList()
				},
				searchonLoad() {
					if (this.page < this.total_page) {
						this.page++
						this.search(this.value)
					} else {
						this.searchloading = false
						this.searchfinished = true
					}
				},
			},

		};

		const app = Vue.createApp(PatientData);

		app.use(vant);
		app.use(vant.Lazyload);

		app.mount("#app");
	</script>
</html>
